<template>
  <view class="template-set">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
	  货物信息
    </tn-nav-bar>

    <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            货物编号
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            {{goods.pnum}}
          </view>
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            货物名称
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            {{goods.pname}}
          </view>
        </view>
      </view>

      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            货物数量
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            {{goods.nums}}{{goods.unit}}
          </view>
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            货物所在地
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            {{goods.address}}
          </view>
        </view>
      </view>
	  <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
	    <view class="justify-content-item">
	      <view class="tn-text-bold tn-text-lg">
	        详细地址
	      </view>
	      <view class="tn-color-gray tn-padding-top-xs">
	        {{goods.addressDetail}}
	      </view>
	    </view>
	  </view>
	  <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
	    <view class="justify-content-item">
	      <view class="tn-text-bold tn-text-lg">
	        货物发票
	      </view>
	      <view class="tn-color-gray tn-padding-top-xs">
			<image :src="host+goods.images1"></image>
	      </view>
	    </view>
	  </view>
	  <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
	    <view class="justify-content-item">
	      <view class="tn-text-bold tn-text-lg">
	        保存仓库
	      </view>
	      <view class="tn-color-gray tn-padding-top-xs">
			<view v-if="goods.instoreId!=null && goods.storeId!=null">{{goods.store}}</view>
			<tn-tag  v-if="goods.instoreId!=null && goods.storeId==null" backgroundColor="#82B2FF" fontColor="#080808">入库中</tn-tag>
			<tn-button v-if="goods.instoreId==null" width="100%" size="sm" backgroundColor="#3668FC"  shadow @click="submit">
			    <text class="tn-color-white tn-text-sm" >申请入库</text>
			</tn-button>
	      </view>
	    </view>
	  </view>
	  
      </view>
      
    </view>
    
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import {findGoods,instore} from '@/api/goods.js'
  import config from '@/api/config'; 
  export default {
    name: 'TemplateSet',
    mixins: [template_page_mixin],
    data(){
      return {
        show1: false,
        show2: false,
        show3: false,
		id:null,
        goods: {},
		host: config.BASE_HOST
      }
    },
	onLoad(options) {
		this.id=options.id 
		this.detail(options.id)
	},
    computed: {

    },
    methods: {
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
	  detail(id){
		  findGoods(id).then(res=>{
			  this.goods = res
		  })
	  },
      submit(){
		  instore({'goodsId':this.id}).then(res=>{
			  this.t.message.toast('申请成功')
			  this.tn('/goods/goods')
		  }).catch(err=>{
			  this.t.message.toast('申请失败')
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
    /* 胶囊*/
    .tn-custom-nav-bar__back {
      width: 60%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 1000rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      color: #FFFFFF;
      font-size: 18px;
      
      .icon {
        display: block;
        flex: 1;
        margin: auto;
        text-align: center;
      }
      
    }


    /* 间隔线 start*/
    .tn-strip-bottom-min {
      width: 100%;
      border-bottom: 1rpx solid #F8F9FB;
    }
    
    .tn-strip-bottom {
     width: 100%;
     border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
    }
     /* 间隔线 end*/


  /* 用户头像 start */
  .logo-image {
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 2rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }


  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
</style>
